{% extends "base.html" %}

{% block title %}Memo{% endblock %}

{% block sidebar %}{% endblock %}

{% block style%}
.question {
    margin: 0px 0px 0px 10px;
    padding: 2px;
    border: 1px solid blue;
    width: 700px;
    display: inline-block;
}
.hidden{
    display: none;
}
.answer {
    margin: 0px 0px 0px 52px;
    border: 1px solid green;
    width: 800px;
    display: none;
}
{% endblock %}

{% block script%}
    var passed_items = new Array();
    var done_items = new Array();
    function toggle_answer(id) {
        abox=document.getElementById("answer-"+id);
        if (abox.style.display=="block")
            abox.style.display="none";
        else
            abox.style.display="block";
    }
    function fail(id) {
        qbox=document.getElementById("question-"+id);
        qbox.style.borderColor="red";
    }
    function pass(id) {
        qbox=document.getElementById("question-"+id);
        qbox.style.borderColor="green";
        passed_items.push(id);
    }
    function done(id) {
        qbox=document.getElementById("question-"+id);
        qbox.style.borderColor="gray";
        done_items.push(id);
    }

{% endblock %}

{% block content %}

<a href="/memo">Memo</a> <a href="/memo?action=export">Export</a>
<br>

<form method="get" action="/memo">
<div>pass fail done</div>
{% for item in items %}
    <input type="radio" name="r{{item.id}}" onclick="pass({{item.id}})" value="pass" />
    <input type="radio" name="r{{item.id}}" onclick="fail({{item.id}})" value="fail" />
    <input type="radio" name="r{{item.id}}" onclick="done({{item.id}})" value="done" />
    r{{item.round}}
    <div class="question" id="question-{{item.id}}" onMouseOut="toggle_answer({{item.id}})" onMouseOver="toggle_answer({{item.id}})">{{item.question}}</div>
    <br>
    <div class="answer" id="answer-{{item.id}}" >{{item.answer}}</div>
{% endfor %}
<input type="hidden" name="action" value="finish" />
<input type="submit" value="Finish this round" />
</form>

<div style="display:none">
{% for item in allitems %}
round={{item.round}} lastpass={{item.lastpass}} id={{item.id}} <br>
{% endfor %}
</div>

<form method="post" action="/memo">
    Question:<br>
    <textarea name="question" rows=1 cols=80></textarea> <br>
    Answer:<br>
    <textarea name="answer" rows=3 cols=80></textarea> <br>
    <input type="submit" value="Add item"/>
</form>

Import 
<form method="post" action="/memo_import" enctype="multipart/form-data">
    <input type="file" name="mfile" size="40"> 
    <input type="submit" value="Upload">
</form>
{% endblock %}
